<template>
    <!-- <div> -->
        <el-form :inline="true" height="auto" :model="queryData" class="demo-form-inline searchPage" ref='ruleForm' :rules='rules' 
            >
            <!-- <el-row> -->
                <el-form-item  
                    v-for="(item,index) in searchRender" 
                    :key="index"
                    :span="item.span"
                    >
                    <!-- input -->
                    <el-form-item 
                        :label='item.label'
                        align="left"
                        
                        v-if='item.type=="$input"'
                        :prop='item.field'
                    >
                        <el-input  v-model="queryData[item.field]" :placeholder="item.placeholder" clearable :disabled="item.disabled"></el-input>
                    </el-form-item>    
                    <!-- 下拉框 -->
                    <el-form-item 
                        :label='item.label'
                        align="left"
                        
                        v-if='item.type=="$select"'
                        :prop='item.field'
                    >
                        <el-select v-model="queryData[item.field]" :placeholder="item.placeholder" clearable class="pw100" :disabled="item.disabled">
                            <el-option
                                v-for="optItem in item.options"
                                :key="optItem.value"
                                :label="optItem.label"
                                :value="optItem.value">
                            </el-option>
                        </el-select>
                    </el-form-item> 
                    <!-- radio -->
                    <el-form-item 
                        :label='item.label'
                        align="left"
                        
                        v-if='item.type=="$radio"'
                        :prop='item.field'
                    >
                        <el-radio-group v-if="item.type=='$radio'" v-model="queryData[item.field]" clearable>
                            <el-radio v-for='(radioItem,radioIndex) in item.options' :disabled="radioItem.disabled"
                                :key='radioIndex'
                                :label="radioItem.label"
                                :value="radioItem.value">
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <!-- checkbox -->
                    <el-form-item 
                        :label='item.label'
                        align="left"
                        
                        v-if='item.type=="$checkbox"'
                        :prop='item.field'
                    >
                        <el-checkbox v-if="item.type=='$checkbox'" v-model="queryData[item.field]" :disabled="item.disabled"></el-checkbox>
                    </el-form-item>
                    <!-- checkboxs -->
                    <el-form-item 
                        :label='item.label'
                        align="left"
                        
                        v-if='item.type=="$checkboxs"'
                        :prop='item.field'
                    >
                        <el-checkbox-group v-if="item.type=='$checkboxs'" v-model="queryData[item.field]" :disabled="item.disabled">
                            <el-checkbox label="美食/餐厅线上活动" name="queryData[item.field]"></el-checkbox>
                            <el-checkbox label="地推活动" name="queryData[item.field]"></el-checkbox>
                            <el-checkbox label="线下主题活动" name="queryData[item.field]"></el-checkbox>
                            <el-checkbox label="单纯品牌曝光" name="queryData[item.field]"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <!-- date -->
                    <el-form-item 
                        :label='item.label'
                        align="left"
                        
                        v-if='item.type=="$date"'
                        :prop='item.field'
                    >
                        <el-date-picker
                            v-model="queryData[item.field]"
                            :format="item.format"
                            :value-format="item.valueformat"
                            :placeholder="item.placeholder"
                            class="pw100"
                            :disabled="item.disabled"
                            :type="item.datetype"
                            :range-separator="item.rangeSeparator"
                            :start-placeholder="item.startPlaceholder"
                            :end-placeholder="item.endPlaceholder"
                            :picker-options="pickerOptionConfig[item.pickerOptions]">
                        </el-date-picker>
                    </el-form-item>
                    <!-- textarea -->
                    <el-form-item 
                        :label='item.label'
                        align="left"
                        class="mr20 textareaElem"
                        v-if="item.type=='$textarea'"
                        :prop='item.field'
                        :disabled="item.disabled"
                    >
                        <el-input type="textarea" v-model="queryData[item.field]" ></el-input>
                    </el-form-item>
                    <!-- 富文本 -->
                    <el-form-item 
                        :label='item.label'
                        align="left"
                        class="mr20 textareaElem"
                        v-if="item.type=='$editor'"
                        :prop='item.field'
                        :disabled="item.disabled"
                    >
                        <!-- <el-input type="textarea" v-model="queryData[item.field]" ></el-input> -->
                        <editor-module :contentDefault="queryData[item.field]" @getEditorCode="getEditorCode"></editor-module>
                    </el-form-item>
                    <!-- buttons -->
                    <el-form-item 
                        v-if="item.type=='$buttons'"
                        class="btnBox"
                        :class="item.type=='$buttons' ? `btn${item.align}` :'btnright'">
                        <el-button 
                            v-for="(btnItem,btnIndex) in item.children" :key="btnIndex"
                            :type="btnItem.status" @click="formCommHandler(btnItem,'ruleForm')"
                            :size="btnItem.size"
                            :disabled="btnItem.disabled"
                            class="fr ml10">{{btnItem.content}}</el-button>
                    </el-form-item> 
                </el-form-item>
                <slot name="search_after"></slot>
            <!-- </el-row> -->
        </el-form> 
        <!-- <div></div>        -->
    <!-- </div>  -->
</template>
<script>
import editorModule from "../editorModule"
export default {
    name: 'Search',
    props: {
        queryParams: {
            type: Object
        }
    },
    components:{
        editorModule
    },
    created(){
        this.searchRender = this.queryParams.searchRender ? this.queryParams.searchRender : []
        this.rules = this.queryParams.rules ? this.queryParams.rules : {}
        this.queryData = this.queryParams.queryData ? this.queryParams.queryData : {}
        this.pickerOptionConfig = this.queryParams.pickerOptionConfig ? this.queryParams.pickerOptionConfig : {}
        for (let i in this.pickerOptionConfig) {
            this.$data[i] = this.pickerOptionConfig[i]
        }
    },
    data() {
        return {
            searchRender: [],
            queryData: {},
            rules: {}            
        }
    },
    methods: {
        resetComm(obj) {
            if(typeof obj == 'string'){
                obj = JSON.parse(obj)
            }
            if(JSON.stringify(obj) == '{}'){
                return
            }
            for(let i in obj){
                if(obj[i] instanceof Array){
                    obj[i] = []
                }
                else if(obj[i] instanceof Object){ //
                    this.resetComm(obj[i])
                }
                else if(typeof obj[i] == 'boolean'){
                    obj[i] = false
                }
                else {
                    obj[i] = ''
                }
            }
        },
        formCommHandler(item, formName) {
            if(item.type == "submit") { //表单提交
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$emit('formCommHandler', item)
                        return false
                    } else {
                        return false;
                    }
                });
                return
            }
            if(item.type == "reset") { //表单重置
                this.resetComm(this.queryData)
                // this.$emit('formCommHandler', item)
            }

            // if(item.type == "cancel") { //表单取消
            //     this.$emit('formCommHandler', item)
            // }
            
            if(item.type == "search") { //查询
                this.$emit('formCommHandler', item)
            }
            // if(item.type == 'colsConfig') { //列配置
            //     this.$emit('formCommHandler', item)
            // }
            // if(item.type == "add"){ //新增
            //     this.$emit('formCommHandler', item)
            // }
            
            // if(item.type == "save"){ //保存
            //     this.$emit('formCommHandler', item)
            // }
            
            // if(item.type == "del"){ //删除
            //     this.$emit('formCommHandler', item)
            // }

            // if(item.type == "childAdd"){ //子表新增
            //     this.$emit('formCommHandler', item)
            // }
            
            // if(item.type == "childSave"){ //子表保存
            //     this.$emit('formCommHandler', item)
            // }
            
            // if(item.type == "childDel"){ //子表删除
            //     this.$emit('formCommHandler', item)
            // }
            this.$emit('formCommHandler', item)
        },
        getEditorCode(content){
          this.queryData.editor=content;  
        }
    }
}
</script>
<style scope>
    .mr10{
        margin-right:10px;
    }
    .mr20{
        margin-right:20px;
    }
    .pw100{
        width:100%;
    }
    .pw80{
        width:80%;
    }
    
    .searchPage .el-form-item{
        margin: 0 20px;
        padding:0 0 2px 0;
        float:left;
    }
    .searchPage .el-form-item__content .el-input__inner{
        height:28px;
        line-height:28px;
    }
    .searchPage .el-form-item__label{
        line-height:30px;
        min-width:90px;
    }
    /* .searchPage .el-input__icon{
        line-height:27px;
    } */
    .searchPage .el-form-item.btnBox{
        float:right;
        margin-top:10px;
    }
    .searchPage .el-form-item__label{
        min-width:80px;
        text-align:left;
    }
    .searchPage .el-form-item__content{
        min-width: 220px;
        /* height: 30px; */
        line-height: 30px;
    }
    .searchPage .el-form-item__content .el-textarea{
        min-width:800px;
    }
    .searchPage .el-date-editor--daterange.el-input,.searchPage  .el-date-editor--daterange.el-input__inner,.searchPage  .el-date-editor--timerange.el-input,.searchPage .el-date-editor--timerange.el-input__inner{
        width:220px;
    }
    .searchPage .el-date-editor .el-range-separator{
        line-height:22px;
    }
    .searchPage .el-input__icon{
        line-height:22px;
    }
    .searchPage .el-form-item__error{
        position:unset;
        
    }
    /* 按钮位置 */
    .searchPage .el-form-item.btnright{
        float:right;
        margin-right:0;
    }
    .searchPage .el-form-item.btncenter{
        float:none;
        margin:20px auto;
    }
    .searchPage .el-form-item.btnleft{
        float:left
    }
    
</style>


